<template>
  <div id="total">
    <div id="first">
      <template v-for="(item,index) in rxs" :key="item.rxId">
        <el-button type="success" @click="formula(item.rx.rxName)" >{{item.rx.rxName}}</el-button>

      </template>

      <el-button type="primary" @click="add" v-if="props.isAdd">+</el-button>
    </div>
    <div id="title">
      <!-- 左边文字 -->
      <div id="left">
        <span id="gray">处方编号:&nbsp;&nbsp;</span>
        <span v-if="focusRxs.rx.rxId" id="gray">{{focusRxs.rx.rxId}}</span>
        <span v-else id="gray">未生成</span>
      </div>
    </div>
    <div id="show" >
      <!-- 下面是否显示 -->
      <div id="total">
    <!-- 表格 -->
    <div id="from">
      <el-table :data="focusRxs.item" style="width: 100%">
        <el-table-column align="center" label="序号" width="100" />
        <el-table-column
          align="center"
          prop="drugName"
          label="药品名"
          width="160"
        />
        <el-table-column
          align="center"
          prop="drugNumber"
          label="数量"
          width="160"
        ><template #default="scope">
        <el-input-number
        v-model="scope.row.drugNumber"
        class="smallWidth"
          :controls="false"
          @change="countChange(scope.row)"
        /></template>
      </el-table-column>
        <el-table-column
          align="center"
          prop="price"
          label="单价(元)"
          width="160"
        ><template #default="scope">
              {{scope.row.price}}元/g
            </template>
            </el-table-column>
        <el-table-column
          align="center"
          prop="amount"
          label="金额(元)"
          width="160"
        />
        <el-table-column
          align="center"
          prop="rxType"
          
          label="特殊要求"
          width="225"
        >
        <template #default="scope">
        <el-input
        @blur="updateData"
        placeholder="特殊要求"
        style="width: 150px;"
        v-model="scope.row.rxType"
        /></template>
      </el-table-column>
        <el-table-column align="center" label="操作" width="100">
              <template #default="scope">
                <el-button @click="DeleteFn(scope.row)">删除</el-button>
              </template>
        </el-table-column>
      </el-table>
    </div>
    <div id="btn">
      <el-button type="primary" @click="table1 = true" v-if="props.isAdd">添加药品</el-button>
      <!-- 添加药品弹窗 -->
      <el-drawer v-model="table1" title="药品" direction="rtl" size="40%">
        <div class="mt-4">
          <el-input
            v-model="searchDr"
            placeholder="药品检索"
            class="input-with-select1"
            @blur="updateData"
            @change="searchDrug"
          >
            <template #append>
              <el-button :icon="Search" />
            </template>
          </el-input>
        </div>

        <el-table :data="getDrugList"
        @row-click="setDrug"
        >
          <el-table-column property="drugName" label="名称" width="80" />
          <el-table-column property="drugSpecification" label="规格" width="80" >
            
          </el-table-column>
          <el-table-column property="allStock" label="库存" />
          <el-table-column property="prescription" label="单价" />
          
        </el-table>
      </el-drawer>
    </div>
    <!-- 附加费用 -->
    <div id="second">
      <!-- 日期 -->
      <div id="s_left">
        <el-button type="success" @click="dialogTableVisible = true" plain
          >附加费用</el-button
        >
        <!-- 附加费用弹框 -->
        <el-dialog v-model="dialogTableVisible" title="附加费用">
          <el-table :data="gridData2">
            <el-table-column type="selection" width="55" />
            <el-table-column property="date" label="名称"  />
            <el-table-column property="name" label="金额"  />
          </el-table>
        </el-dialog>
      </div>
      <div id="s_right">
        <span>每</span>
        <el-input-number
        v-model="focusRxs.rx.rxDay"
        class="smallWidth"
          :controls="false"
          @change="changeDosage"
        />
        <span>天</span>
        <el-input-number
          v-model="focusRxs.rx.rxDosage"
          class="smallWidth"
          :controls="false"
          @change="changeDosage"
        />
        <span>剂</span>
        <span>服用</span>
        <el-input-number
          v-model="focusRxs.rx.rxTotalDay"
          class="smallWidth"
          :controls="false"
          @change="changeDosage"
        />
        <span>天</span>
        <span>共</span>
        <span>{{ focusRxs.rx.rxTotalDosage }}</span>
        <span>剂</span>
      </div>
    </div>
    <!-- 药品展示 -->
    <div id="medicine">
      <div id="firstLine">
        <span id="blue">药品展示:</span>
      </div>
      <div id="box_first">
        <template v-for="item in focusRxs.item" >
          <span>{{item.drugName}}&nbsp;{{item.drugNumber}}g &nbsp;&nbsp;</span>
        </template>
      </div>
    </div>
    <div id="form">

<!-- 第一排 -->
<div>
  <div id="firstLine">
    <span id="blue">服药要求:</span>
  </div>
  <div id="box">
    <el-form-item label="">
      <el-input
      @blur="updateData"
        placeholder="填写医生建议(限500字)"
        v-model="focusRxs.rx.medicationRequirements"
        type="textarea"
      />
    </el-form-item>
  </div>
</div>
<!-- 第二排 -->
<div>
  <div id="firstLine">
    <span id="blue">中药备注:</span>
  </div>
  <div id="box">
    <el-form-item label="">
      <el-input
      @blur="updateData"
        placeholder="填写中药备注(限500字)"
        v-model="focusRxs.rx.remarks"
        type="textarea"
      />
    </el-form-item>
    
  </div>
</div>
</div>
  </div>
    </div>
    
    
  </div>
</template>
<script setup lang="ts">
import { ref, reactive, computed, onMounted, onBeforeMount, onUpdated } from "vue";
import { Search } from "@element-plus/icons-vue";
import { useStore, mapGetters, mapMutations } from "vuex";
import { ElMessage } from "element-plus";
// const store = useStore();  
//   const getRecordsRef = computed(mapGetters(["getRecordsRef"]).getRecordsRef.bind({$store: store,}))

// 挂号
const props = defineProps({isAdd:Boolean})
const store = useStore();  
  const rxs = computed(mapGetters(["getRxs"]).getRxs.bind({$store: store,}))

  const getDrugList = computed(mapGetters(["getDrugList"]).getDrugList.bind({$store: store,}))
  const setDrugList = mapMutations(["setDrugList"]).setDrugList.bind({$store: store,})
  const focusRxs = ref(rxs.value[0])
const flag = ref("处方一");
const formula = (val:any) => {
  flag.value = val;
  rxs.value.forEach((rx:any) => {
    if(rx.rx.rxName == val){
      focusRxs.value = rx;
    }
  });
};
onBeforeMount(()=>{
  setDrugList()
  focusRxs.value=rxs.value[0]
})
const changeDosage = ()=>{
  let rxItem = focusRxs.value.rx;
  focusRxs.value.rx.rxTotalDosage = rxItem.rxDosage * (rxItem.rxTotalDay/rxItem.rxDay)
}
const setDrug = (row:any)=>{
  if(row.allStock>0){
    let flag=true;
    if(focusRxs.value.item.length>0){
      focusRxs.value.item.forEach((item:any) => {
        if(item.id==row.id){
          flag=false;
        }
    });
    }
    if(flag){
    table1.value=false; 
    focusRxs.value.item.push({
      "rxName": focusRxs.value.rx.rxName,
      "recordsId": focusRxs.value.rx.recordsId,
      "drugNumber": 1,
      "drugName": row.drugName,
      "measure": 1,
      "price": row.prescription,
      "amount": 1,
      "rxId": focusRxs.value.rx.rxId,
      "rxType": row.drugSort,
      "rxDay": null,
      "rxDosage": null,
      "rxTotalDay": null,
      "rxTotalDosage": null,
      "medicationRequirements": "",
      "remarks": "",
    })
    }
    
  }
}
const searchDr = ref("");
const searchDrug = ()=>{
  setDrugList(searchDr.value)
}
const rxNamList = [
  "处方一",
  "处方二",
  "处方三",
  "处方四",
  "处方五",
  "处方六",
  "处方七",
  "处方八",
  "处方九"
]
function PrefixInteger(num:any, length:any) {
  return (Array(length).join('0') + num).slice(-length);
 }
 function getRandomStr(length:any){
  let num = PrefixInteger(Math.floor(Math.random()*1000000),length)
  return new Date().toLocaleDateString().replaceAll("/","")+num
 }

const add = () => {
  console.log("add",rxs.value);
  if(rxs.value[rxs.value.length-1].item.length<1){
    ElMessage({
          message: "请使用空处方！"
        });
    return;
  }else{
  let name = rxNamList[rxs.value.length]
  let rxId = Number(getRandomStr(8))
  rxs.value.push({
    rx:{
      "rxName": name,
      "recordsId": null,
      "drugNumber": 1,
      "drugName": null,
      "measure": 1,
      "price": null,
      "amount": null,
      "rxId": rxId,
      "rxType": "",
      "rxDay": 1,
      "rxDosage": 1,
      "rxTotalDay": 1,
      "rxTotalDosage": 1,
      "medicationRequirements": "",
      "remarks":"",
    },
    item:[]
  })
  formula(name)
}
   
};
const countChange = (row:any)=>{
  row.amount = row.drugNumber * row.price
}

const dialogTableVisible = ref(false);

const table1 = ref(false);
const form = reactive({
  name: "",
  region: "",
  date1: "",
  date2: "",
  delivery: false,
  type: [],
  resource: "",
  desc: "",
});
const gridData2 = [
  {
    date: "老鼠",
    name: "老鼠",
  },
  {
    date: "老鼠",
    name: "老鼠",
  },
  {
    date: "老鼠",
    name: "老鼠",
  },
];
const DeleteFn = (row: any) => {
  for (let i = 0; i <  focusRxs.value.item.length; i++) {
    if(focusRxs.value.item[i].drugName==row.drugName){
      focusRxs.value.item.splice(i,1)
    }
  }
};
onUpdated(()=>{
  updateData()
  
})
const emit = defineEmits(["submitData"])
const updateData = ()=>{
  emit("submitData",rxs)
}
</script>
<style scoped>
#first{
  height: 60px;
  display: flex;
  align-items: center;
}
#box_first{
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(64, 64, 64);
  margin-top: 10px;
  margin-bottom: 10px;
}
#box_first > span{
  margin-left: 10px;
}
#blue {
  color: #429bff;
}
#firstLine {
  height: 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
}
.el-form-item {
  margin-top: 10px;
}
#box {
  height: 70px;
}
#second {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  
}
#s_right > span{
  margin-left: 20px;
}
#s_right > .el-input-number{
  margin-left: 10px;
}
#g {
  margin-left: 20px;
}
#total {
  display: flex;
  
}
#title {
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-top: 1px solid #adacac;
  border-bottom: 1px solid #dcdfe6;
  width: 100%;
  height: 50px;
}
#blue {
  color: #429bff;
}
#gray {
  color: #999999;
}
#red {
  color: #fd6666;
}
#grayOne {
  color: #676a6d;
}
#innerThree {
  color: #676a6d;
}

#btn1 {
  display: flex;
  align-items: center;
  justify-content: center;
  margin-top: 20px;
}
#btn1 > div {
  margin-left: 10px;
}
#btn > .el-button {
  width: 100%;
  height: 30px;
}
#box_first {
  height: 50px;
  display: flex;
  align-items: center;
  border: 1px solid rgb(64, 64, 64);
  margin-top: 10px;
  margin-bottom: 10px;
}
#box_first > span {
  margin-left: 10px;
}
#blue {
  color: #429bff;
}
#firstLine {
  height: 30px;
  display: flex;
  align-items: center;
  border-bottom: 1px solid #dcdfe6;
}
#total {
  display: flex;
  flex-direction: column;
}
#second {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 60px;
  
}
#s_right > span {
  margin-left: 20px;
}
#s_right > .el-input-number {
  margin-left: 10px;
}
.smallWidth{
  width: 70px;
}
</style>
